<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#p1{
				border: 11px dotted gold;
				border-radius: 20px;
			}
		</style>
		<script>
			function showPass(){
				document.getElementById("pass").type="text";
			}
			function shiftImg(){
				var p=document.querySelector("img");
				p.setAttribute("src","../images/kongzi.jpg");
			}
			function addImg(){
				let im=document.createElement("img");
				im.src="../images/jixue.jpg";
				im.height=300;
				im.width=200;
				document.getElementById("p1").appendChild(im);
				//document.body.appendChild(im);//加到窗口的最后
			}
			function cloneDiv(){
				let im=document.getElementById("p1");
				document.body.appendChild(im.cloneNode(true));
			}
			function delDiv(){
				var q=document.querySelector("body>div:last-of-type");
				q.parentNode.removeChild(q);
			}
		</script>
	</head>
	<body>
		<div id="p1">
			<img src="../images/banner2.jpg" height="200px" width="200px"/>
			<input type="password" name="pass" id="pass"/>
			<a href="javascript:showPass()">查看一下</a>
			<button onclick="shiftImg()">换一张图片</button>
			<button onclick="addImg()">加一张图片</button>
			<button onclick="cloneDiv()">克隆div加到最后</button>
			<button onclick="delDiv()">删除最后一个div</button>
		</div>
	</body>
</html>